<template>
  <div class="content">
    <div>
      <img class="logo" src="../assets/image/huanghou.png" />
      <div class="title">分布式储存</div>
    </div>

    <div class="box">
      <input type="text" placeholder="请输入手机号" v-model="mobile" />
    </div>
    <div class="box">
      <input :type="typePwd" placeholder="请输入登录密码" v-model="passwords" />
      <img :src="path" @click="showPsWord" />
    </div>
    <div class="box">
      <input :type="typePwd1" placeholder="请确认登录密码" v-model="confirm_password" />
      <img :src="path1" @click="showPsWord1" />
    </div>
    <div class="box">
      <input :type="typePwd2" placeholder="请输入交易密码" v-model="trade_password" />
      <img :src="path2" @click="showPsWord2" />
    </div>
    <div class="box">
      <input :type="typePwd3" placeholder="请确认交易密码" v-model="confirm_trade_password" />
      <img :src="path3" @click="showPsWord3" />
    </div>
    <div class="box2">
      <input type="text" placeholder="请输入验证码" v-model="sms_code" />
      <div v-if="!yan" class="mini" @click="sendsms">获取验证码</div>
      <div v-else class="mini">{{ second }}s</div>
    </div>
    <div class="box"><input type="text" placeholder="请输入邀请码" v-model="tj_code" /></div>
    <div class="box1" @click="navto">注册</div>
    <div class="box3"><a :href="this.down_url">下载APP</a></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      typePwd: 'password',
      typePwd1: 'password',
      typePwd2: 'password',
      typePwd3: 'password',
      path: require('../assets/image/biyan.png'),
      path1: require('../assets/image/biyan.png'),
      path2: require('../assets/image/biyan.png'),
      path3: require('../assets/image/biyan.png'),
      mobile: '',
      passwords: '',
      confirm_password: '',
      trade_password: '',
      confirm_trade_password: '',
      sms_code: '',
      tj_code: '',
      yan: false,
      second: 60,
      down_url: ''
    }
  },
  mounted() {
    this.getinfo()
  },
  methods: {
    getinfo() {
      var str1 = window.location.href
      if (str1.indexOf('?') != -1) {
        var str2 = str1.split('?')[1]
        var str3 = str2.split('=')[1]
        var str4 = str3.slice(0, 6)
        this.tj_code = str4.trim()
        console.log(str4)
      }
      this.axios.get('/api/Ext/appVersion').then(res => {
        console.log(res.data.data.down_url)
        this.down_url = res.data.data.down_url
      })
    },
    sendsms() {
      if (this.mobile != '') {
        var data = {
          mobile: this.mobile
        }
        this.axios.post('/api/Login/sendsms', this.qs.stringify(data)).then(res => {
          if (res.data.code == 1) {
            if (this.yan) {
              return false
            }
            this.yan = true
            let interval = setInterval(() => {
              --this.second
            }, 1000)
            setTimeout(() => {
              clearInterval(interval)
              this.yan = false
              this.second = 60
            }, 60000)
          } else {
            alert(res.data.msg)
          }
        })
      } else {
        alert('手机号不能为空')
      }
    },
    navto() {
      if (this.mobile != '' && this.passwords != '' && this.confirm_password != '' && this.trade_password != '' && this.confirm_trade_password != '' && this.sms_code != '' && this.tj_code != '') {
        var data = {
          mobile: this.mobile,
          password: this.passwords,
          confirm_password: this.confirm_password,
          trade_password: this.trade_password,
          confirm_trade_password: this.confirm_trade_password,
          sms_code: this.sms_code,
          tj_code: this.tj_code
        }
        this.axios.post('/api/Login/reg', this.qs.stringify(data)).then(res => {
          alert(res.data.msg)
          if (res.data.code == 1) {
            alert('注册成功！下载APP去体验吧')
          }
        })
      } else {
        alert('请填写完整信息')
      }
    },
    showPsWord() {
      this.typePwd = this.typePwd === 'password' ? 'text' : 'password'
      this.path = this.path === require('../assets/image/biyan.png') ? require('../assets/image/zhengyan.png') : require('../assets/image/biyan.png')
    },
    showPsWord1() {
      this.typePwd1 = this.typePwd1 === 'password' ? 'text' : 'password'
      this.path1 = this.path1 === require('../assets/image/biyan.png') ? require('../assets/image/zhengyan.png') : require('../assets/image/biyan.png')
    },
    showPsWord2() {
      this.typePwd2 = this.typePwd2 === 'password' ? 'text' : 'password'
      this.path2 = this.path2 === require('../assets/image/biyan.png') ? require('../assets/image/zhengyan.png') : require('../assets/image/biyan.png')
    },
    showPsWord3() {
      this.typePwd3 = this.typePwd3 === 'password' ? 'text' : 'password'
      this.path3 = this.path3 === require('../assets/image/biyan.png') ? require('../assets/image/zhengyan.png') : require('../assets/image/biyan.png')
    }
  }
}
</script>
<style scoped>
html body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
.content::-webkit-scrollbar {
  display: none;
}

.box > img {
  width: 25px;
  height: 25px;

  padding-top: 8px;
}
.mini {
  width: 80px;
  height: 40px;
  background: #f3c347;
  border-radius: 7.5px;

  white-space: nowrap;

  font-size: 8px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  line-height: 40px;
}
.content {
  background-image: url(../assets/image/bg2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-bottom: 100px;
  overflow: hidden;
}
input::-webkit-input-placeholder {
  color: #ffffff;
}
input::-moz-input-placeholder {
  color: #ffffff;
}
input::-ms-input-placeholder {
  color: #ffffff;
}
.box2 {
  width: 250px;
  height: 40px;
  border: 1px solid #fff;
  border-radius: 15px;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding-left: 10px;
  align-items: center;
  overflow: hidden;
}
.box2 > input {
  min-width: none !important;
  width: 130px;
  flex: 1;
}
.box {
  width: 250px;
  height: 40px;
  border: 1px solid #fff;
  border-radius: 15px;
  margin: 20px auto;
  display: flex;
  box-sizing: border-box;
  padding: 0 10px;
}
.box1 {
  width: 250px;
  height: 40px;
  border: 1px solid #ffffff;
  border-radius: 15px;
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #fff;
  text-align: center;
  line-height: 36px;
  margin: 20px auto;
}
.box3 {
  width: 250px;
  height: 40px;
  background: #f3c347;
  border-radius: 15px;
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #fff;
  text-align: center;
  line-height: 36px;
  margin: 20px auto;
}
.box3 > a {
  text-decoration: none;
  color: #ffffff;
}
input {
  border: 0;
  line-height: 36px;
  outline: none;
  background-color: transparent;

  color: #ffffff;
  flex: 1;
}
.logo {
  display: block;
  /* width: 100px;
			height: 80px; */
  width: 77px;
  height: 63px;
  margin: 60px auto 0 auto;
}
.title {
  font-family: PingFang SC;
  font-weight: bold;
  color: #f3c347;
  font-size: 18px;
  text-align: center;
  margin: 0 auto 20px auto;
  /* padding-top: 270px; */
  letter-spacing: 1px;
}
</style>
